<template>
  <div class="simple-avatar">
    <img 
      :src="avatarUrl" 
      :alt="alt || '用户头像'"
      :class="['avatar-image', sizeClass]"
      @error="handleImageError"
      @load="handleImageLoad"
    />
    <div v-if="loading" class="avatar-loading">
      <span>加载中...</span>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { getUserAvatarFileName, getDefaultAvatar } from '../utils/avatar'
import { BASE_URL } from '@/api/baseurl.js'

export default {
  name: 'SimpleAvatar',
  props: {
    userId: {
      type: String,
      default: null
    },
    size: {
      type: String,
      default: 'medium', // small, medium, large
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    alt: {
      type: String,
      default: '用户头像'
    }
  },
  emits: ['load', 'error'],
  setup(props, { emit }) {
    const avatarUrl = ref(getDefaultAvatar())
    const loading = ref(false)
    const hasError = ref(false)

    const sizeClass = computed(() => {
      return `avatar-${props.size}`
    })

    const loadAvatar = async () => {
      if (!props.userId) {
        avatarUrl.value = getDefaultAvatar()
        return
      }

      loading.value = true
      hasError.value = false

      try {
        // 获取用户头像文件名
        const fileName = await getUserAvatarFileName(props.userId)
        
        if (fileName) {
          // 直接构建URL
          const url = `${BASE_URL}/api/Image/file/${fileName}`
          avatarUrl.value = url
          emit('load', url)
        } else {
          // 没有头像，使用默认头像
          avatarUrl.value = getDefaultAvatar()
          emit('load', getDefaultAvatar())
        }
      } catch (error) {
        console.error('加载头像失败:', error)
        avatarUrl.value = getDefaultAvatar()
        hasError.value = true
        emit('error', error)
      } finally {
        loading.value = false
      }
    }

    const handleImageError = (event) => {
      console.warn('头像图片加载失败，使用默认头像')
      avatarUrl.value = getDefaultAvatar()
      hasError.value = true
      emit('error', new Error('图片加载失败'))
    }

    const handleImageLoad = (event) => {
      hasError.value = false
      emit('load', event.target.src)
    }

    // 监听userId变化
    watch(() => props.userId, () => {
      loadAvatar()
    }, { immediate: true })

    return {
      avatarUrl,
      loading,
      hasError,
      sizeClass,
      handleImageError,
      handleImageLoad
    }
  }
}
</script>

<style scoped>
.simple-avatar {
  position: relative;
  display: inline-block;
}

.avatar-image {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
}

.avatar-image:hover {
  border-color: #007bff;
  transform: scale(1.05);
}

.avatar-small {
  width: 32px;
  height: 32px;
}

.avatar-medium {
  width: 48px;
  height: 48px;
}

.avatar-large {
  width: 64px;
  height: 64px;
}

.avatar-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style> 